<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示所有学生信息</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<div id="app">
    <input type="button" value="返回" @click="back">
    <br>
    <table border="1px" width="50%" height="300px" cellspacing="0px" align="center">
        <tr >
            <th>编号</th>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>出生日期</th>
        </tr>
        <tr v-for="(element , index) in students" align="center">
            <td>{{index+1}}</td>
            <td>{{element.id}}</td>
            <td>{{element.sname}}</td>
            <td>{{element.gender}}</td>
            <td>{{element.birthday}}</td>
        </tr>
    </table>
</div>
</body>

<script>

    new Vue({

        el:"#app",
        data : {
            students : ''
        },
        // 页面加载后执行
        mounted(){
            var t = this;
            axios.get("/Code/printServlet").then(function (response) {
                t.students=response.data;
                if(t.students==''){
                    alert("没有学生信息！！！");
                }
            },function (error) {

            })
        },
        methods:{
            back(){
                location.href="view.html";
            }
        }

    })
</script>
</html>